<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name=renderer content=webkit>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css">
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <title>首页</title>
</head>

<body>
    <div class="header fixed-top" id="header">
        <div class="container d-flex justify-content-between align-items-center">
            <div class="logo">
                <a href="#"><img src="img/logo.png"></a>
            </div>
            <ul class="nav">
                <li class="nav__item">
                    <a class="nav__item-link nav-active" href="#">首页</a>
                </li>
                <li class="nav__item">
                    <a class="nav__item-link" href="#">关于我们</a>
                </li>
                <li class="nav__item">
                    <a class="nav__item-link" href="#">业务体系</a>
                </li>
                <li class="nav__item">
                    <a class="nav__item-link" href="#">产品中心</a>
                </li>
                <li class="nav__item">
                    <a class="nav__item-link" href="#">客户案例</a>
                </li>
                <li class="nav__item">
                    <a class="nav__item-link" href="#">技术支持</a>
                </li>
                <li class="nav__item">
                    <a class="nav__item-link" href="#">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="swiper-container" id="banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/banner1.png"></div>
            <div class="swiper-slide"><img src="img/banner2.jpg"></div>
            <!-- <div class="swiper-slide"><img src="holder.js/100px680?random=yes"></div> -->
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="index">
        <!-- 业务体系 -->
        <div class="section">
            <div class="container">
                <div class="section-header">
                    <div class="section-title">
                        <h5>业务体系</h5>
                        <p>Service</p>
                    </div>
                </div>
                <div class="section-cont">
                    <ul class="serveList">
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">网站建设</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">软件开发</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">网络推广</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">运维托管</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 客户案例 -->
        <div class="section">
            <div class="container">
                <div class="section-header">
                    <div class="section-title">
                        <h5>客户案例</h5>
                        <p>Service</p>
                    </div>
                </div>
                <div class="section-cont">
                    <ul class="serveList">
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">网站建设</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">软件开发</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">网络推广</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                        <li class="serveList__item border">
                            <i class="fa fa-television"></i>
                            <h3 class="serveList__item-title">运维托管</h3>
                            <p class="serveList__item-desc">优秀的策划方案能够让您的网站在同行间异军突起</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.min.js"></script>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
<script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script>
<script src="js/aui-scroll.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var bannerSwiper = new Swiper('#banner.swiper-container', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
            }
        })
        var scroll = new auiScroll({
            listen: true,
            distance: 200
        }, function (ret) {
            if (ret.scrollTop > $('#banner').height()) {
                $("#header").stop().animate({
                    backgroundColor: "#007BFF !important"
                }, 0);
            } else {
                $("#header").stop().animate({
                    backgroundColor: "transparent"
                }, 0);
            }
        });
    });
</script>

</html>